import { Pie } from '@ant-design/plots';
import {Card, message, Tooltip, Typography} from 'antd';
import numeral from 'numeral';
import React, {useEffect, useState} from 'react';
import useStyles from './style.style';
import {getCollectNumsUsingGet} from "@/services/api-share-backhend/analysiController";
import {InfoCircleOutlined} from "@ant-design/icons";
const { Text } = Typography;
const CollectInterface = () => {
  const { styles } = useStyles();
  const [loading,setLoading]=useState(false)
  const [data,setData]=useState(false)
  const getData=async ()=>{
    try {
      const res = await getCollectNumsUsingGet({ });
      if(res.data!=undefined&&res.data!=null){
        const data=res.data.reduce((acc,item)=>{
          acc.push({
            x:item.interfaceName,
            y:item.count
          });
          return acc
        },[])
        setData(data );
      }
      else {
        message.error(res.message)
      }

    } catch (e) {
      message.error(e.message);
    }
  }
  useEffect(() => {
    getData()
  }, []);
  return (
    <Card
      loading={loading}
      className={styles.salesCard}
      bordered={false}
      title={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span>所有用户收藏情况</span>
          <Tooltip title="系统内所有用户对于各个接口的收藏情况">
            <InfoCircleOutlined style={{ marginLeft: 8 }} />
          </Tooltip>
        </div>
      }
      style={{
        height: '100%',
      }}
    >
      <div>
        <Pie
          height={340}
          radius={0.8}
          innerRadius={0.5}
          angleField="y"
          colorField="x"
          data={data }
          legend={false}
          label={{
            position: 'spider',
            text: (item: { x: number; y: number }) => {
              return `${item.x}: ${numeral(item.y).format('0,0')}`;
            },
          }}
        />
      </div>
    </Card>
  );
};
export default CollectInterface;
